<template>
  <view class="container-fluid bgpng">
    <!-- 说明区域 -->
    <view
      class="mask-info text-center text-danger-emphasis animate__animated animate__fadeIn"
    >
      <text class="uni-error">
        <text class="bi bi-mask"></text> 人物原型</text
      >
      <view class="mask-details" :class="{ 'expanded': isDescriptionExpanded }">
        <text class="symbol">
          <text class="bi bi-file-earmark-text"></text>
          {{ isDescriptionExpanded ? currentMaskInfo.description : truncatedDescription }}</text
        >
        <view class="expand-btn" @tap="toggleDescription">
          <text class="bi" :class="isDescriptionExpanded ? 'bi-chevron-up' : 'bi-chevron-down'"></text>
          <text>{{ isDescriptionExpanded ? '收起' : '展开' }}</text>
        </view>
      </view>
    </view>

    <view class="row">
      <!-- 顶部工具栏 -->
      <view class=" mb-4">
        <view
          class="d-flex justify-content-between align-items-center tools-bar"
        >
          <!-- 颜色选择区域 - 修改为点击选择 -->
          <view class="color-palette d-flex">
            <view
              v-for="(color, index) in colors"
              :key="index"
              class="color-block rounded-circle"
              :style="{ backgroundColor: color }"
              :class="{ 'selected-color': selectedColor === color }"
              @tap="selectColor(color)"
            ></view>
          
          </view>

          <!-- 操作按钮组 -->
          <view class="d-flex  ">
            <button class="uni-mx-2" type="warn" @tap="resetColors">
              <text class="bi bi-box2-heart"></text>
              <text>完成定制</text>
            </button>

            <button class="uni-mx-2" @tap="clearColors">
              <text class="bi bi-eraser"></text>
              <text>清除填色</text>
            </button>

            <button class="uni-mx-2" type="primary" @tap="saveDesign">
              <text class="bi bi-download"></text>
              <text>保存设计</text>
            </button>
          </view>
        </view>

        <!-- 面具预览区域 -->
        <view class="mask-previews d-flex uni-my-6">
          <view
            class="active"
          >
            <image
              :src="url('tx',3,'png')"
              alt="mask4"
              class="image-fluid preview-image"
            ></image>
          </view>
        </view>
      </view>

      <!-- SVG 编辑区域 - 修改为点击填色 -->
      <view class="col-12">
        <view class="svg-container">
          <!-- #ifdef MP-WEIXIN -->
          <canvas
            type="2d"
            id="svgCanvas"
            class="mask-svg"
            @touchstart="handleCanvasTap"
          ></canvas>
          <!-- #endif -->

          <!-- #ifndef MP-WEIXIN -->
          <svg
            class="mask-svg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 1000 1000"
            preserveAspectRatio="xMidYMid meet"
            width="100%"
            height="100%"
          >
            <g :transform="`translate(0,0)`">
              <path
                v-for="(path, index) in currentSvgPaths"
                :key="`mask-${currentMaskIndex}-path-${index}`"
                :d="path.d"
                :transform="path.transform"
                :fill="path.fill"
                stroke="#000"
                stroke-width="1"
                stroke-miterlimit="10"
                :data-part="path.dataPart"
                :data-mask-index="currentMaskIndex"
                @click="handlePartClick(path.dataPart)"
              />
            </g>
          </svg>
          <!-- #endif -->
          
          <!-- 添加人物名字显示 -->
          <view class="character-name">
            <text class="name-text">{{ currentMaskInfo.name }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 完成定制弹窗 -->
    <uni-popup ref="completePopup" type="center" :mask-click="false">
      <view class="complete-card animate__animated animate__zoomIn">
        <view class="card-header">
          <i class="bi bi-check-circle-fill success-icon"></i>
          <text class="title">定制完成</text>
        </view>

        <!-- 进度条 -->
        <view class="progress-steps">
          <view
            v-for="(step, index) in steps"
            :key="index"
            class="step-item"
            :class="{ active: step.active, completed: step.completed }"
          >
            <view class="step-icon">
              <i :class="['bi', step.icon]"></i>
            </view>
            <text class="step-text">{{ step.text }}</text>
            <view
              v-if="index < steps.length - 1"
              class="step-line"
              :class="{ active: step.active }"
            ></view>
          </view>
        </view>

        <view class="card-content">
          <text class="message">您的面具定制方案已提交</text>
          <text class="sub-message">我们的工匠正在精心制作</text>
          <text class="estimate">预计7-10个工作日完成</text>
        </view>

        <view class="d-flex justify-content-around">
          <view
            ><button type="warn" class="w-100 " @tap="saveToAlbum">
              <text class="bi bi-download"></text>
              保存到相册
            </button>
          </view>
          <view>
            <button type="warn" class="w-100 " @tap="closePopup">
              <text class="bi bi-check2"></text>
              确认
            </button></view
          >
        </view>
      </view>
    </uni-popup>

    <!-- 分享弹窗 -->
    <uni-popup ref="sharePopup" type="bottom">
      <view class="share-popup">
        <view class="share-header">
          <text class="share-title">分享到</text>
          <text class="close-btn" @tap="closeShare">×</text>
        </view>
        <view class="share-content">
          <view
            class="share-item"
            v-for="item in shareOptions"
            :key="item.value"
            @tap="handleShare(item)"
          >
            <text :class="['bi', getShareIcon(item.value)]"></text>
            <text class="share-text">{{ item.content }}</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, computed, reactive, onMounted } from "vue";
import { svgPathsCollection } from "@/data/svg-paths";

// 颜色数组
const colors = ref([
  "#FF0000",
  "#00FF00",
  "#0000FF",
  "#FFFF00",
  "#FF00FF",
  "#FFFFFF",
  "#000000",
  "#808080",
]);

// 选中的颜色
const selectedColor = ref(null);

// 分享选项
const shareOptions = [
  { content: "微信好友", value: "wechat" },
  { content: "朋友圈", value: "moments" },
  { content: "QQ好友", value: "qq" },
];

const currentMaskIndex = ref(3);
const svgContainer = ref(null);

// 保存所有面具的颜色状态
const masksColorState = reactive(
  Array(5)
    .fill(null)
    .map(() => ({}))
);

// 步骤数据
const steps = reactive([
  {
    text: "定制完成",
    icon: "bi-check-circle-fill",
    active: true,
    completed: true,
  },
  { text: "开始制作", icon: "bi-tools", active: false, completed: false },
  { text: "质检通过", icon: "bi-award", active: false, completed: false },
  { text: "发货", icon: "bi-truck", active: false, completed: false },
]);

const completePopup = ref(null);
const currentStep = ref(0);

// 计算当前显示的 SVG 路径，包含颜色状态
const currentSvgPaths = computed(() => {
  if (!svgPathsCollection || !Array.isArray(svgPathsCollection)) {
    console.error('SVG paths collection is not properly loaded');
    return [];
  }
  
  const paths = svgPathsCollection[currentMaskIndex.value] || [];
  if (!paths.length) {
    console.error(`No paths found for mask index ${currentMaskIndex.value}`);
    return [];
  }
  
  // 过滤掉空的路径
  return paths
    .filter(path => path.d && path.d.trim() !== '')
    .map((path) => ({
      ...path,
      fill: masksColorState[currentMaskIndex.value]?.[path.dataPart] || path.fill,
    }));
});

// 选择颜色
const selectColor = (color) => {
  selectedColor.value = color;
  
  // 添加反馈
  uni.vibrateShort({
    success: function() {
      console.log('振动成功');
    }
  });
};

// 处理面具部分点击
const handlePartClick = (partIndex) => {
  if (!selectedColor.value) {
    uni.showToast({
      title: '请先选择颜色',
      icon: 'none'
    });
    return;
  }
  
  // 更新对应面具的颜色状态
  if (!masksColorState[currentMaskIndex.value]) {
    masksColorState[currentMaskIndex.value] = {};
  }
  masksColorState[currentMaskIndex.value][partIndex] = selectedColor.value;
  
  // 添加填色反馈
  uni.vibrateShort();
};

// 为小程序添加canvas点击处理
const handleCanvasTap = (event) => {
  // #ifdef MP-WEIXIN
  if (!selectedColor.value) {
    uni.showToast({
      title: '请先选择颜色',
      icon: 'none'
    });
    return;
  }
  
  const touch = event.touches[0];
  const x = touch.x;
  const y = touch.y;
  
  // 这里需要检测点击位置对应的面具部分
  // 由于在小程序中无法直接获取SVG路径点击，需要使用坐标计算
  // 这里是简化示例，实际应用中需要根据具体路径形状判断
  
  // 找到点击的部分
  const hitPart = findHitPart(x, y);
  if (hitPart) {
    // 更新颜色状态
    if (!masksColorState[currentMaskIndex.value]) {
      masksColorState[currentMaskIndex.value] = {};
    }
    masksColorState[currentMaskIndex.value][hitPart] = selectedColor.value;
    
    // 重绘canvas
    drawSvgToCanvas();
    
    // 添加填色反馈
    uni.vibrateShort();
  }
  // #endif
};

// 查找点击位置对应的部分 (小程序中使用)
const findHitPart = (x, y) => {
  // 在实际应用中，需要根据SVG路径的形状和位置来计算
  // 这里仅为示例
  return null;
};

// 重置颜色
const resetColors = async () => {
  completePopup.value.open();

  // 重置步骤状态
  steps.forEach((step) => {
    step.active = false;
    step.completed = false;
  });

  // 第一步默认完成
  steps[0].active = true;
  steps[0].completed = true;

  // 开始进度条动画
  for (let i = 1; i < steps.length; i++) {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    steps[i].active = true;
    steps[i - 1].completed = true;
    
    // 添加振动反馈
    uni.vibrateShort();
  }

  // 最后一步完成
  await new Promise((resolve) => setTimeout(resolve, 1000));
  steps[steps.length - 1].completed = true;
  uni.vibrateShort();
};

// 添加 canvas 相关变量
let ctx = null;
let canvas = null;

// 修改保存设计函数
const saveDesign = async () => {
  try {
    // #ifdef MP-WEIXIN
    const query = uni.createSelectorQuery();
    query
      .select("#svgCanvas")
      .fields({ node: true, size: true })
      .exec((res) => {
        if (!res[0]) return;

        canvas = res[0].node;
        ctx = canvas.getContext("2d");

        // 设置 canvas 大小
        const dpr = uni.getSystemInfoSync().pixelRatio;
        canvas.width = res[0].width * dpr;
        canvas.height = res[0].height * dpr;
        ctx.scale(dpr, dpr);

        // 绘制 SVG 内容到 canvas
        drawSvgToCanvas();

        // 保存到相册
        uni.canvasToTempFilePath({
          canvas: canvas,
          success: (res) => {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.showToast({
                  title: "保存成功",
                  icon: "success",
                });
              },
            });
          },
        });
      });
    // #endif

    // #ifdef H5
    const html2canvas = (await import("html2canvas")).default;
    const canvas = await html2canvas(svgContainer.value);
    const link = document.createElement("a");
    link.download = `mask-design-${Date.now()}.png`;
    link.href = canvas.toDataURL();
    link.click();
    // #endif
  } catch (error) {
    uni.showToast({
      title: "保存失败",
      icon: "error",
    });
  }
};

// 添加绘制 SVG 到 canvas 的函数
const drawSvgToCanvas = () => {
  // #ifdef MP-WEIXIN
  if (!ctx || !canvas) return;

  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制当前 SVG 路径
  currentSvgPaths.value.forEach((path) => {
    ctx.beginPath();
    ctx.fillStyle = path.fill;
    ctx.strokeStyle = "#000";

    // 这里需要将 SVG 路径转换为 canvas 路径
    // 可以使用 SVGPathData 库或其他方法来解析 SVG 路径
    // 这里只是示例，实际需要根据具体的 SVG 路径来实现
    // ctx.moveTo(...);
    // ctx.lineTo(...);
    // 等等...

    ctx.fill();
    ctx.stroke();
  });
  // #endif
};

// 在 onMounted 中初始化 canvas
onMounted(() => {
  console.log('SVG paths collection:', svgPathsCollection);
  console.log('Current SVG paths:', currentSvgPaths.value);
  
  // #ifdef MP-WEIXIN
  setTimeout(() => {
    const query = uni.createSelectorQuery();
    query
      .select("#svgCanvas")
      .fields({ node: true, size: true })
      .exec((res) => {
        if (!res[0]) return;

        canvas = res[0].node;
        ctx = canvas.getContext("2d");

        // 设置 canvas 大小
        const dpr = uni.getSystemInfoSync().pixelRatio;
        canvas.width = res[0].width * dpr;
        canvas.height = res[0].height * dpr;
        ctx.scale(dpr, dpr);

        // 初始绘制
        drawSvgToCanvas();
      });
  }, 100);
  // #endif
  
  // 默认选择第一个颜色
  if (colors.value.length > 0) {
    selectedColor.value = colors.value[0];
  }
});

const sharePopup = ref(null);

// 获取分享图标
const getShareIcon = (type) => {
  const icons = {
    wechat: "bi-wechat",
    moments: "bi-people-fill",
    qq: "bi-tencent-qq",
    save: "bi-download",
  };
  return icons[type] || "bi-share";
};

// 打开分享弹窗
const openShare = () => {
  sharePopup.value.open();
};

// 关闭分享弹窗
const closeShare = () => {
  sharePopup.value.close();
};

// 处理分享
const handleShare = (item) => {
  // #ifdef H5
  switch (item.value) {
    case "wechat":
      window.location.href = "weixin://";
      break;
    case "qq":
      window.location.href = "mqq://";
      break;
    case "save":
      saveToAlbum();
      break;
  }
  // #endif

  // #ifdef MP-WEIXIN
  if (item.value === "save") {
    saveToAlbum();
  } else {
    uni.share({
      provider: item.value,
      scene: item.value === "moments" ? "WXSenceTimeline" : "WXSceneSession",
      type: 0,
      title: "我的傩面设计",
      imageUrl: svgContainer.value,
      success: () => {
        uni.showToast({
          title: "分享成功",
          icon: "success",
        });
      },
      fail: () => {
        uni.showToast({
          title: "分享失败",
          icon: "error",
        });
      },
    });
  }
  // #endif

  closeShare();
};

// 保存到相册
const saveToAlbum = async () => {
  try {
    // #ifdef H5
    const html2canvas = (await import("html2canvas")).default;
    const canvas = await html2canvas(svgContainer.value);
    const tempFilePath = canvas.toDataURL();
    // #endif

    // #ifdef MP-WEIXIN
    // 使用小程序原生的截图方法
    const query = uni.createSelectorQuery();
    query
      .select(".svg-container")
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node;
        // 实现小程序的截图逻辑
      });
    // #endif

    uni.saveImageToPhotosAlbum({
      filePath: tempFilePath,
      success: () => {
        uni.showToast({
          title: "保存成功",
          icon: "success",
        });
      },
      fail: () => {
        uni.showToast({
          title: "保存失败",
          icon: "error",
        });
      },
    });
  } catch (error) {
    uni.showToast({
      title: "保存失败",
      icon: "error",
    });
  }
};

// 关闭弹窗
const closePopup = () => {
  completePopup.value.close();
  // 重置步骤状态
  steps.forEach((step, index) => {
    if (index > 0) {
      step.active = false;
      step.completed = false;
    }
  });
};

const url = $url;

const showDropdown = ref(false);

const toggleDropdown = () => {
  showDropdown.value = !showDropdown.value;
};

// 添加清除填色方法
const clearColors = () => {
  // 清除当前面具的所有颜色
  masksColorState[currentMaskIndex.value] = {};

  // 重置所有路径的填充颜色为默认值（仅影响非小程序平台）
  // #ifndef MP-WEIXIN
  const paths = document.querySelectorAll(
    `[data-mask-index="${currentMaskIndex.value}"]`
  );
  paths.forEach((path) => {
    const defaultPath = svgPathsCollection[currentMaskIndex.value].find(
      (p) => p.dataPart === path.getAttribute("data-part")
    );
    path.setAttribute("fill", defaultPath?.fill || "#fff");
  });
  // #endif
  
  // #ifdef MP-WEIXIN
  // 重绘canvas
  drawSvgToCanvas();
  // #endif

  // 显示提示
  uni.showToast({
    title: "已清除填色",
    icon: "success",
    duration: 1500,
  });
};

// 面具信息配置
const avatarDec=[{
 
 name: "墨枢·宋小星",
 description:
   "宋应星（1587年—约1666年），字长庚，江西奉新人，明代著名科学家、农学家和思想家。他自幼聪颖，早年科举屡试不第，后转向实学，游历各地考察民生工艺，晚年隐居著述。其代表作《天工开物》系统总结了明末农业、手工业技术，被誉为中国17世纪的工艺百科全书，另著有《论气》《谈天》等科学著作，展现了朴素的唯物主义思想，对后世科技发展影响深远。",

},
{

 name: "墨枢·墨小子",
 description:
   "墨子（约前470—前391），名翟，战国初期思想家、政治家，墨家学派创始人。出身平民，精通手工技艺，早年学儒后自创墨家，主张兼爱非攻尚贤节用，反对战争与奢侈。他带领弟子奔走列国，以逻辑辩论和防御战术闻名，曾成功阻止楚国攻宋。墨家组织严密，崇尚实践，与儒家并称显学。其思想载于《墨子》，包含哲学、科学、军事等内容，对中国逻辑学与工程技术有重要贡献。",

},
{

 name: "墨枢·徐小启",
 description:
   "徐光启（1562—1633），明代著名科学家、农学家、政治家，字子先，号玄扈，上海人。他早年科举入仕，官至礼部尚书兼文渊阁大学士，晚年致力于科学研究，与意大利传教士利玛窦合作翻译《几何原本》，引入西方数学知识，并编撰《农政全书》系统总结中国农业技术，推动中西文化交流，被誉为中国近代科学先驱。",

},
{

 name: "墨枢·沈小括",
 description:
   "沈括（1031—1095），字存中，号梦溪丈人，北宋著名科学家、政治家。他博学多才，在天文、数学、地理、物理、化学、医学等领域均有卓越贡献，代表作《梦溪笔谈》被誉为中国科学史上的里程碑。他参与王安石变法，历任提举司天监、翰林学士等职，晚年退居润州梦溪园潜心著述。其科学成就领先时代，如发现地磁偏角、提出石油命名等，展现了宋代科技的高度。",

},
{

 name: "墨枢·张小衡",
 description:
   "张衡（78年－139年），字平子，东汉著名科学家、文学家，南阳西鄂（今河南南阳）人。他精通天文、数学、机械制造，发明了世界最早的地动仪（候风地动仪）和浑天仪，提出浑天说，著有《灵宪》《算罔论》等科学著作；文学上以《二京赋》著称，擅长辞赋。曾任太史令，晚年任尚书，因病逝世。因其卓越贡献被后世尊为科圣，国际天文学联合会将月球背面一环形山命名为张衡山",

},]

// 当前面具信息
const currentMaskInfo = computed(() => avatarDec[currentMaskIndex.value]);

const isDescriptionExpanded = ref(false);
const truncatedDescription = computed(() => {
  if (currentMaskInfo.value.description.length > 100) {
    return currentMaskInfo.value.description.slice(0, 100) + '...';
  }
  return currentMaskInfo.value.description;
});

const toggleDescription = () => {
  isDescriptionExpanded.value = !isDescriptionExpanded.value;
  // 添加动画效果
  uni.vibrateShort();
};
</script>

<style scoped>
.bgpng {

  background: url(https://epoch.jxksd.top/mo/images/dbg.png) no-repeat top
    center/cover;

}

.tools-bar {

  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.color-palette {
  gap: 10px;
  align-items: center;
}

.color-block {
  width: 45px;
  height: 45px;
  cursor: pointer;
  border: 2px solid #ccc;
  transition: transform 0.2s, box-shadow 0.2s;
}

.color-block:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* 选中的颜色样式 */
.selected-color {
  border: 3px solid #363639;
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

/* 当前选择的颜色提示 */
.current-color-hint {
  display: flex;
  align-items: center;
  margin-left: 15px;
  font-size: 14px;
}

.color-sample {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-left: 8px;
}

.mask-previews {
  gap: 15px;
}

.preview-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.active .preview-image {
  border: 3px solid var(--td-brand-color);
  transform: scale(1.1);
}

.svg-container {
  background: #fff;

  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  min-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.mask-svg {
  width: 100%;
  height: 100%;

  display: block;
  margin: 0 auto;
  transform: translateX(0);
}

path {
  transition: fill 0.3s;
  cursor: pointer;
}

path:hover {
  opacity: 0.8;
}

.action-buttons {
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .tools-bar {
    flex-direction: column;
    gap: 15px;
  }

  .color-palette,
  .mask-previews {
    justify-content: center;
  }

  .mask-svg {
    width: 100%;
  }

  .color-block {
    width: 35px;
    height: 35px;
  }

  .preview-image {
    width: 50px;
    height: 50px;
  }
}

.complete-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  width: 80vw;
  max-width: 600rpx;
}

.card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 20rpx;
  position: relative;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
  width: 25%;
  text-align: center;

  &:last-child {
    flex: 0;
    width: 25%;
  }
}

.step-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  position: relative;
  z-index: 2;
  margin-left: auto;
  margin-right: auto;

  i {
    font-size: 32rpx;
    color: #999;
  }
}

.step-text {
  font-size: 24rpx;
  color: #999;
}

.step-line {
  position: absolute;
  top: 30rpx;
  left: 50%;
  right: -50%;
  height: 4rpx;
  background: #f5f5f5;
  z-index: 1;
  overflow: hidden;

  &.active {
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background: var(--td-brand-color);
      transform: translateX(-100%);
      transition: transform 0.8s ease-out;
    }

    &::before {
      transform: translateX(0);
    }
  }
}

.step-item.active {
  .step-icon {
    background: var(--td-brand-color);

    i {
      color: #fff;
    }
  }

  .step-text {
    color: var(--td-brand-color);
  }
}

.card-content {
  text-align: center;
  margin: 40rpx 0;
}

.message {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.sub-message {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
  display: block;
}

.estimate {
  font-size: 24rpx;
  color: #999;
}

.success-icon {
  font-size: 48rpx;
  color: #07c160;
}


.mask-info {

  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.mask-details {
  position: relative;
  transition: all 0.3s ease;
  max-height: 100px;
  overflow: hidden;
  padding: 10px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  margin-top: 10px;
}

.mask-details.expanded {
  max-height: 1000px;
}

.expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  color: var(--td-brand-color);
  font-size: 24rpx;
  cursor: pointer;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.expand-btn:active {
  transform: scale(0.95);
}

.expand-btn text {
  margin: 0 5rpx;
}

.expand-btn .bi {
  font-size: 28rpx;
  transition: transform 0.3s ease;
}

.expand-btn .bi-chevron-down {
  transform: rotate(0deg);
}

.expand-btn .bi-chevron-up {
  transform: rotate(180deg);
}

.character-name {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: upright;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.name-text {
  font-size: 24px;
  font-weight: bold;
  color: var(--td-brand-color);
  letter-spacing: 5px;
}
</style>